<!--
 * @Descripttion:
 * @Author: zhangziyu
 * @Date: 2022-11-05 23:28:26
 * @LastEditors: zhangziyu
 * @LastEditTime: 2022-11-06 14:03:31
 * @Introduce:咨询页
-->
<template>
<div class="consultingService">
  <el-breadcrumb separator="/" class="navigation">
      <el-breadcrumb-item :to="{ path: '/' }"><span class="gray"><i class="el-icon-s-home"></i>首页</span></el-breadcrumb-item>
      <el-breadcrumb-item><span class="green">乡农问答</span></el-breadcrumb-item>
    </el-breadcrumb>
  <div class="consultingServiceMain">
    <div class="consultingProcess">
      <img src="./img/consultingProcess.png" alt="">
    </div>
    <div class="consultingServiceMainContent">
      <p>1.请根据问题类型、问题标题、问题内容依次进行内容完善</p>
      <div class="consultingServiceMainForm">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
          <el-form-item label="问题标签：" prop="labelIds2">
             <el-select v-model="ruleForm.labelIds2" multiple placeholder="请选择" style="width:450px" @change="changeSel">
                <el-option
                  v-for="item in lableOptions"
                  :key="item.id"
                  :label="item.labelName"
                  :value="item.id">
                </el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="自定义标签：" prop="customizeLabel" v-if="labelNum<5">
            <div v-for="(item,index) in titleArr" :key="index">
              <el-input v-model="item.value" placeholder="请输入标签内容" style="width:450px;margin-top:10px;" clearable @change="changeTitle(item.value,index)"></el-input>
              <i class="el-icon-plus" style="cursor:pointer;font-size: 20px;margin-left:15px;" v-if="index===0" @click="addTitle"></i>
              <i class="el-icon-delete" style="cursor:pointer;font-size: 20px;margin-left:15px;" v-if="index!==0" @click="delTitle(index)"></i>
            </div>
          </el-form-item>
          <el-form-item label="问题标题：" prop="qtitle">
            <el-input type="textarea" placeholder="输入不少于10个字，不超过100个字。" :rows="3" maxlength="100" show-word-limit v-model="ruleForm.qtitle"></el-input>
          </el-form-item>
          <el-form-item label="问题描述：" prop="qcontent">
            <el-input type="textarea" placeholder="输入不少于10个字，不超过100个字。" :rows="7" maxlength="500" show-word-limit v-model="ruleForm.qcontent"></el-input>
          </el-form-item>
           <el-form-item label="是否公开：" prop="openFlag" class="transpire">
            <el-radio-group v-model="ruleForm.openFlag">
              <el-radio label="1">是</el-radio>
              <el-radio label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <p style="margin:50px 0px">2.请留下您的邮箱地址，您的问题我们将以邮件方式通知（也可登录后台进行查看）</p>
        <div class="consultingServiceMainForm">
          <el-form :model="ruleForm" :rules="rules" label-width="100px">
            <el-form-item label="邮箱：" prop="qemail">
                <el-input v-model="ruleForm.qemail" placeholder="请输入邮箱"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="submitForConsultation">
           <el-button type="primary" @click="submitForm()">提交咨询</el-button>
        </div>
    </div>
  </div>
</div>

</template>

<script>
import { getAllLabelList } from '@/api/index.js'
export default {
  data () {
    return {
      mailbox: '',
      lableOptions: [],
      ruleForm: {
        openFlag: '1'
      },
      labelNum: 0,
      titleArr: [{ value: '' }],
      rules: {
        qtitle: [
          { required: true, message: '请输入问题标题', trigger: 'blur' }
        ],
        qcontent: [
          { required: true, message: '请输入问题描述', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.init()
  },
  mounted () {
    window.scrollTo(0, 0)
  },
  methods: {
    init () {
      console.info(111)
      this.getLableList()
    },
    // 获取标签列表
    getLableList () {
      getAllLabelList().then((res) => {
        if (res.data.code !== 0) {
          this.$message.error(res.data.msg)
          return false
        }
        this.lableOptions = res.data.data
      })
    },
    // 切换问题标题
    changeSel (val) {
      let selArr = this.ruleForm.labelIds2
      let tiArr = this.titleArr
      let titleNum = 0
      for (let i in tiArr) {
        if (tiArr[i].value !== '') {
          titleNum++
        }
      }
      if (selArr.length + titleNum > 5) {
        this.$message.error('最多可添加5个标签！')
        val.splice(-1, 1)
        this.$set(this.ruleForm, 'labelIds2', val)
      }
      this.labelNum = this.ruleForm.labelIds2.length
    },
    // 添加标题
    addTitle () {
      let selArr = this.ruleForm.labelIds2
      let tiArr = this.titleArr
      if (tiArr[tiArr.length - 1].value === '') {
        return this.$message.error('请先填写标签内容！')
      }
      let titleNum = 0
      for (let i in tiArr) {
        if (tiArr[i].value !== '') {
          titleNum++
        }
      }
      if (selArr.length + titleNum > 5) {
        this.$message.error('最多可添加5个标签！')
        return false
      }
      tiArr.push({ value: '' })
      this.titleArr = tiArr
    },
    // 删除标题
    delTitle (index) {
      this.titleArr.splice(index, 1)
    },
    // 编辑标题
    changeTitle (val, index) {
      let arr = this.lableOptions
      let tiArr = this.titleArr
      for (let i in arr) {
        if (arr[i].labelName === val) {
          this.$message.error('该标签已存在！')
          tiArr[index].value = ''
          break
        }
      }
      this.titleArr = tiArr
    },
    submitForm () {
      this.$refs.ruleForm.validate((valid) => {
        if (!valid) {
          return false
        }
        let tiArr = this.titleArr
        let arr = []
        if (tiArr.length !== 0) {
          for (let i in tiArr) {
            arr.push(tiArr[i].value)
          }
        }
        this.$set(this.ruleForm, 'customizeLabel', arr.join(','))
        this.ruleForm.labelIds = this.ruleForm.labelIds2.join(',')
        this.$http.post('/xnkt/tbquestionkt', this.ruleForm).then(({ data: res }) => {
          if (res.code !== 0) {
            return false
          }
          this.$confirm('专家解答后将会通过后台消息及邮件同步提醒，请您注意查看', '提交成功', {
            confirmButtonText: '进入后台',
            cancelButtonText: '我知道了',
            type: 'success',
            confirmButtonClass: 'confirmButton',
            cancelButtonClass: 'cancelButton',
            center: true
          }).then(() => {
            this.$router.push({ name: 'perCenter/view' })
          }).catch(() => {
            this.$router.push({ name: 'questionAnswer' })
          })
        }).catch(() => {})
      })
    }
  }
}
</script>
<style lang="scss">
.confirmButton{
 background-color:#26840C;
 border-color:#26840C
}
.confirmButton:focus, .confirmButton:hover{
  background-color:#26840C;
 border-color:#26840C
}
.cancelButton:hover{
  color: #26840C;
  border-color: #9ed28f;
  background-color: #ecf5ff;
}
</style>
<style lang="scss" scoped>
.navigation{
    padding: 20px 0px;
    .gray{
      color: #C2C6CC;
    }
    .green{
      color:#009B46
    }
  }
.consultingServiceMain{
  .consultingProcess{
      margin: 40px 0px;
      text-align: center;
      img{
        width: 600px;
      }
    }
    .consultingServiceMainForm{
      margin: auto;
      width: 850px;
      .transpire{
        /deep/ .el-radio__input.is-checked .el-radio__inner{
          background: #26840C;
          border-color:#26840C
        }
        /deep/ .el-radio__input.is-checked+.el-radio__label{
          color: #26840C;
        }
      }
    }
    .consultingServiceMainContent{
      .submitForConsultation{
        padding: 50px 0px;
        text-align: center;
        /deep/ .el-button{
          padding: 12px 50px;
        }
        /deep/ .el-button--primary{
            background-color: #26840C;
            border-color:#26840C
        }
        /deep/ .el-button--primary:focus, .el-button--primary:hover{
            background: #229302;
        }
      }
    }
}

</style>
